import React, { Component } from 'react'
import { Checkbox, Button } from 'antd-mobile'
import Header from '../../components/Header/Header'
import "./Shop.less"
import { reqcartlist, reqcartdelete, reqcartedit } from '../../http/api'
import { $pre } from '../../http/http'
import { Stepper, Manual, DemoBlock, Toast } from 'antd-mobile'
import { filterPrice } from "../../filters";

export default class Car extends Component {
    constructor() {
        super()
        this.state = {
            num: 1,
            carList: [],
            allChecked: false,
            allPrice: 0,
            select_num: 0
        };
        this.isRequest = true;
    }
    // 页面加载完成就请求列表
    componentDidMount() {
        this.getCarList()
    }
  
    async getCarList() {
        let { allChecked, carList } = this.state
        let res = await reqcartlist({
            uid: JSON.parse(localStorage.getItem("isLogin")).uid
        })
        if (res.data.code === 200) {
            // ①先处理数据
            let list = res.data.list[1].content ? res.data.list[1].content : []
            list.forEach((item) => {
                // ②如果之前选中，新增数量后仍然是选中的状态
                let obj = carList.find((list) => list.id === item.id);
                // ③如果之前有选中状态，就按照之前的，如果没有就false
                item.checked = obj ? obj.checked : false;
            })
            // ④修改react中的状态（数据）
            this.setState({
                carList: list
            }, () => {
                // 计算出总价
                this.allPrice()
                // 计算总数
                this.select_num()
                this.isRequest = true;
//  allChecked = carList.length > 0 ? carList.every((item) => { item.checked }) : false
            })
         
           

        }
    }

    // 增加商品 |
    async add(id, num) {
        if (num <= 4) {
          if (this.isRequest) {
            this.isRequest = false;
            let res = await reqcartedit({ id: id, type: 2 });
            if (res.data.code == 200) {
              Toast.show({
                content: res.data.msg,
              });
              //请求列表
              this.getCarList()
            }
          }
        } else {
          Toast.show({
            content: "限购五件",
          });
        }
      }
    // 减少商品
    async sub(id, num) {
        if (num > 1) {
          // 由于用户可能多次连点，为了防止连点多次发请求，所以设置一个状态isRequest,真就发请求，假就不能发请求。
          // 一旦要发请求，立刻将isRequest=false，直到新的列表回来了，才将它改为isRequest=true,方便下一次请求。
          if (this.isRequest) {
            this.isRequest = false;
            let res = await reqcartedit({ id: id, type: 1 });
            if (res.data.code == 200) {
              Toast.show({
                content: res.data.msg,
              });
              //请求列表
              this.getCarList()
            }
          }
        } else {
          Toast.show({
            content: "宝贝不能再少了",
          });
        }
      }
    // 5删除商品
    async deleteShop(id) {
        let res = await reqcartdelete({ id: id })
        if (res.data.code === 200) {
            // 弹唱提醒
            Toast.show({
                icon: 'success',
                content: res.data.msg
            })
            // 重新请求列表
            this.getCarList()
        }
    }
    // 点击全选
    changeAll(val) {
        console.log(val);
        // 设置state中的数据(修改全选布尔值)
        this.setState({
            allChecked: val
        })
        // 遍历carList所有的布尔值，同步allChecked
        this.state.carList.forEach((item) => {
            item.checked = val
        })
        // 修改仓库的数据
        this.setState({
            carList: this.state.carList
        })
        // 计算出总价
        this.allPrice()
        // 计算总数
        this.select_num()
    }
    // 7选中全部商品---全选按钮也选中
    changeOne(val, id) {
        console.log('本次勾选', val, id, '全选状态是', this.state.allChecked);
        // 找到点击的商品
        let obj = this.state.carList.find((item) => {
            return item.id == id
        })
        // 修改它的布尔值
        obj.checked = val
        // 修改数据库的数据
        this.setState({
            carList: this.state.carList
        })
        console.log('carList', this.state.carList);
        // 遍历carList中的每一项，所有的checked全是真返回真()
        let bol = this.state.carList.every((item) => {
            return item.checked
        })
        // 修改state中的值
        this.setState({
            allChecked: bol
        })
        // 计算出总价
        this.allPrice()
        // 计算总数
        this.select_num()
    }
    // 8显示总价封装的函数
    allPrice() {
        this.state.allPrice = this.state.carList.reduce(
            (total, item) =>
                item.checked ? (total + item.num * item.price) : total, 0
        )
        this.setState({
            allPrice: this.state.allPrice
        })
    }
    //9显示总数量封装的函数
    select_num() {
        this.state.select_num = this.state.carList.reduce(
            (total, item) => item.checked ? total + item.num : total, 0
        )
        this.setState({
            select_num: this.state.select_num
        })
    }
    // 10结算商品
    account() {
        // 弹窗成功
        Toast.show({
            icon: 'success',
            content: '结算成功',
        })
        // 跳转页面
    }
    render() {
        let { carList,  allChecked, allPrice, select_num } = this.state
        return (
            <div className='car'>
                <Header back title="购物车"></Header>
                {carList.length == 0 ? <div>暂无数据</div> :
                    carList.map((item) => {
                        return (
                            <div className='car_content' key={item.id}>
                                <div className='car_left'>
                                    <Checkbox
                                        onChange={(val) => { this.changeOne(val, item.id) }}
                                        checked={item.checked}
                                    ></Checkbox>
                                    <img className='car_left_img' src={$pre + item.img} alt={item.goodsname} />
                                </div>

                                <div className='car_right'>
                                    <h1>{item.goodsname}</h1>
                                    <p>价格：{filterPrice(item.price)}元</p>
                                    <div>
                                        <Button
                                            size='mini'
                                            color='default'
                                            onClick={() => { this.sub(item.id,item.num) }}
                                        >-</Button>

                                        <span>{item.num}</span>

                                        <Button size='mini' color='primary'
                                            onClick={() => { this.add(item.id,item.num) }}
                                        >+</Button>
                                    </div>
                                    <Button color='danger' onClick={() => { this.deleteShop(item.id) }}>删除商品</Button>
                                </div>
                            </div>
                        )
                    })
                }
                <footer className='car_footer'>
                    <div className='car_footer_count'>
                        <Checkbox
                            disabled={carList.length == 0}
                            checked={allChecked}
                            onChange={(val) => { this.changeAll(val) }}
                        >全选</Checkbox>
                        <span>总价：{allPrice.toFixed(2)}</span>
                        <span>总数：{select_num}</span>
                        <Button color='danger'
                            onClick={() => { this.props.history.push("/coupon") }}
                        >优惠券</Button>
                    </div>

                    <Button block
                        color='primary'
                        size='large'
                        onClick={() => { this.account() }}
                    >
                        点击结算
                    </Button>


                </footer>
            </div>




        )
    }
}
